<template>
	<view>
		<view class="nav-box">
			<!-- 导航栏 -->
			<u-tabs lineColor="#2979FF" :activeStyle="{'color':'#2979FF'}" scrollable :list="list1" @click="click" :current="current"></u-tabs>
		</view>
		<m-task v-for="(item,index) in actList" :item='item'></m-task>


		<!-- <view class="card" v-for="(item ,index) in actList" :key="index" @click.native="toActivityDetail(item)">
			<view class="image-box">
				<image class="bgImage" :src="item.imageSrc===null||item.imageSrc===''?bgImageSrc:item.imageSrc"></image>
			</view>
			<view class="detail-box">
				<view class="task-title">{{item.title}}</view>
				<view class="task-userNum">{{item.joinNum}}人报名</view>
				<view class="task-time">{{item.startTime}}</view>
				<view class="task-address">{{item.address}}</view>
				<view class="task-status" v-if="item.surplusTime>0">报名中</view>
				<view class="task-close" v-if="item.surplusTime<0">已结束</view>
			</view>
		</view> -->
		<view class="not-more" v-show="show" style="margin-bottom: 10%;">已经到底了~~</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getAvtivities()
			// this.getNavList()
		},
		data() {
			return {
				bgImageSrc: `${this.$baseUrl}/image/download?name=bgMsg.jpg`,
				currentPage: 1,
				pageSize: 10,
				current: 0,
				//活动列表
				actList: [],
				show: false,
				type: 0,
				// 导航栏
				list1: [{
					name: '全部',
				}, {
					name: '推荐'
				}],
			};
		},
		onReachBottom() {
			// console.log("到底了")
			this.currentPage++
			this.getAvtivities()
		},
		onPullDownRefresh() {
			// console.log("刷新更新数据")
			this.currentPage = 1
			this.actList = []
			// console.log(this.currentPage)
			this.getAvtivities()
		},
		methods: {
			click(item) {
				console.log('item', item);
				this.currentPage = 1
				this.actList = []
				//为1则是全部活动
				this.type = item.index
				this.getAvtivities()
			},
			// 获取导航栏集合
			async getNavList() {
				uni.request({
					url: `${this.$baseUrl}/task/getNav`,
					method: 'GET',
					success: (res) => {
						console.log(res.data)
						this.list1 = [...this.list1, ...res.data.data]
					}
				})
			},
			//跳转到活动详细页面
			async toActivityDetail(value) {
				// console.log(value)
				uni.navigateTo({
					url: '/pages/activityDetail/activityDetail?id=' + value.id,
				})
			},

			//获取活动列表
			getAvtivities() {
				const user = uni.getStorageSync("user")
				// console.log(user)
				uni.request({
					// 去找公告或者最近的任务活动
					url: `${this.$baseUrl}/task/taskList/${this.currentPage}/${this.pageSize}/${this.type}/${user.id}`,
					method: 'GET',
					// data:{
					//   pageNo:this.currentPage,
					//   pageSize:this.pageSize
					// },
					success: res => {
						console.log(res.data)
						// 之前的数据和之后的数据结合
						this.actList = [...this.actList, ...res.data.data]
						if (res.data.data.length < this.pageSize) {
							this.show = true
						}
						// console.log(this.actList)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-box {
		display: flex;
	}

	.nav-item {
		// background-color: green;
		border: 1px green solid;
		width: 60rpx;
		height: 40rpx;
	}

	.detail-box {
		// float: right;
		font-size: 30rpx;
	}

	.task-title {
		// float: right;
		font-size: 45rpx;
	}

	// .task-userNum{

	// }
	// .task-time{


	.task-address {
		// font-size: 45rpx;
	}

	.task-status {
		float: right;
		font-size: 30rpx;
		margin-right: 20rpx;
		border: 1px solid green;
		color: green;
		border-radius: 20rpx;
	}

	.task-close {
		float: right;
		font-size: 30rpx;
		margin-right: 20rpx;
		border: 1px solid red;
		color: red;
		border-radius: 20rpx;
	}

	.card {
		// background-color: blue;
		height: 220rpx;
		border: 1rpx solid #ddd;
		border-radius: 20rpx;
		margin: 40rpx 20rpx;
		background-color: ghostwhite;
		// padding: 20rpx 30rpx;
		display: flex;

	}

	.image-box {
		height: 100%;
		// background-color:blue;
		width: 30%;
		margin-right: 15rpx;
	}

	.bgImage {
		height: 100%;
		width: 100%;
		border-radius: 10px;
	}

	.detail-box {
		float: right;
		// background-color: red;
		height: 200rpx;
		width: 70%;
	}

	.not-more {
		text-align: center;
		font-size: 30rpx;
	}
</style>
